<!-- 评论 -->
<div id="comments-template" xmlns:th="http://www.w3.org/1999/xhtml">
    <div class="comments-container comments-root-container" id="comments-content">
        <div>
            <h3 class="comments-header-container alert alert-info">
                <i class="fa fa-comments"></i>
                [[${commentCount}?:0]]条评论
            </h3>
        </div>
        <div>
            <ul class="comments-comments-container comment-list" id="comment-list">
                <li th:each="item:${comments.getRecords()}" th:id="${item.id}" class="comment-item"
                    th:data-user-id="${item.user.id}">
                    <article class="comment-body">
                        <footer class="comment-meta">
                            <div class="comment-author vcard">
                                <img width="66" height="66" th:src="${item.user.avatar}?:'/images/default-avatar.jpg'">
                                <b class="fn" th:text="${item.user.nickname}"></b>
                                <span class="says">说：</span>
                            </div>
                            <div class="comment-metadata">
                                <a>
                                    <time th:datetime="${item.createTime}"
                                          th:text="${#dates.format(item.createTime,'yyyy年MM月dd日 HH:mm:ss')}"></time>
                                </a>
                            </div>
                        </footer>
                        <div class="comment-content">
                            <p th:utext="${item.content}"></p>
                        </div>
                        <div class="reply">
                            <a th:unless="${session.USER}" rel="nofollow" class="comment-reply-login"
                               th:href="'/login?redirect_to='+${#request.getRequestURL()}+'#'+${item.id}">登录以回复</a>
                            <a th:if="${session.USER}" rel="nofollow" class="comment-reply-link">回复</a>
                        </div>
                    </article>
                    <ol class="children" style="padding-left: 20px;">
                        <li th:each="reply,replyStat:${item.subComments}" th:id="${reply.id}"
                            th:data-user-id="${reply.user.id}">
                            <article class="comment-body comment-children">
                                <footer class="comment-meta">
                                    <div class="comment-author vcard">
                                        <img th:src="${reply.user.avatar}?:'/images/default-avatar.jpg'"
                                             width="66"
                                             height="66">
                                        <b class="fn" th:text="${reply.user.nickname}"></b>
                                        回复 <b class="fn" th:text="${reply.replyUser.nickname}"></b>
                                        <span class="says">说：</span>
                                    </div>
                                    <div class="comment-metadata">
                                        <time th:datetime="${reply.createTime}"
                                              th:text="${#dates.format(reply.createTime,'yyyy年MM月dd日 HH:mm:ss')}"></time>
                                    </div>
                                </footer>
                                <div class="comment-content">
                                    <p th:utext="${reply.content}"></p>
                                </div>
                                <div class="reply">
                                    <a th:unless="${session.USER}" rel="nofollow" class="comment-reply-login"
                                       th:href="'/login?redirect_to='+${#request.getRequestURL()}+'#'+${reply.id}">登录以回复</a>
                                    <a th:if="${session.USER}" rel="nofollow" class="comment-reply-link">回复</a>
                                </div>
                            </article>
                        </li>
                    </ol>
                </li>
            </ul>
            <button th:if="${comments.hasNext()}" class="btn btn-danger btn-lg btn-block" id="more-comments"
                    th:data-size="${comments.size}" th:data-current="${comments.current}"
                    th:data-pages="${comments.getPages()}" th:data-is-login="${session.USER}!=null">点击加载更多...
            </button>
        </div>
        <div id="respond">
            <div class="comments-editor-container">
                <h3 class="comment-reply-title" id="reply-title"><i class="fa fa-pencil"></i> 欢迎留言
                    <small><a rel="nofollow" id="cancel-comment-reply-link" style="display: none;">取消回复</a></small>
                </h3>
                <form id="commentform" class="comment-form form-inline">
                    <div class="comments-editor-write-field">
                        <input type="hidden" id="articleId" name="articleId" th:value="${info.id}"/>
                        <input type="hidden" id="targetType" name="targetType" value="1"/>
                        <input type="hidden" id="parentId" name="parentId" value=""/>
                        <input type="hidden" id="replyUserId" name="replyUserId" value=""/>
                        <textarea class="comments-editor-write-field" id="content" placeholder="赶快发表你的见解吧！"
                                  name="content" cols="45" rows="8"
                                  aria-required="true"></textarea>
                    </div>
                    <div id="loading" style="display: none;"><i class="fa fa-spinner fa-spin"></i> 正在提交, 请稍候...
                    </div>
                    <p class="form-submit">
                        <input type="submit" id="comment-submit" class="comments-editor-submit" value="发表评论">
                    </p>
                </form>
            </div>
        </div>
    </div>
</div>
